<template>
	<view class="textarea">
		<view class="title">我的兴趣（{{info.currentArr.length}}/{{info.max}}）</view>
		<view style="color: #999999;" class="font-24">完善我的兴趣爱好，匹配共同爱好的企业家</view>

		<view class="flex flex-jc-sb flex-wrap-w tabs">
			<view v-for="(item,i) in info.arr" :key="i" @click="choose(item)">
				<view class="tabs-i"
					:style="{background: info.currentArr.includes(item.hobby) ? '#000':'#F8F8F8',color: info.currentArr.includes(item.hobby) ? '#fff':'#000'}">
					{{item.hobby}}
					<!-- info.currentArr.includes() -->
				</view>
			</view>
		</view>
	</view>

	<view class="btn" @click="editMemberInfo">
		保 存
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '../../api/user'
	import common from '../../api/common'
	let info = reactive({
		arr: [],
		max: 5,
		currentArr: [],
		id: null
	})
	const choose = (item : any) => {
		if (info.currentArr.includes(item.hobby)) {
			let index = info.currentArr.findIndex(v => v == item.hobby)
			info.currentArr.splice(index, 1)
		} else {
			if (info.currentArr.length >= info.max) {
				return uni.showToast({
					title: '超出限制',
					icon: 'none'
				})
			}
			info.currentArr = [...info.currentArr, item.hobby]
		}
	}
	const editMemberInfo = () => {
		uni.showLoading()
		user.editMemberInfo({
			hobby: info.currentArr,
			id: info.id
		}).then((res) => {
			if (res.code === 200) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.value = {
					arr: info.currentArr,
					type: 5
				}
				uni.navigateBack()
			} else {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			}
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		})

	}
	//兴趣爱好
	const getHobby = async () => {
		const res = await common.getHobby()
		if (res.code === 200) {
			info.arr = res.data
		}

	}
	onLoad((op) => {
		info.id = op.id
		uni.$once('info', (v : any) => {
			info.currentArr = v
		})
		getHobby()
	})
</script>

<style lang="scss">
	:deep(.uni-textarea-wrapper) {
		font-size: 30rpx;
	}

	.tabs {
		margin-top: 30rpx;
	}

	.tabs:after {
		content: "";
		width: 150rpx;
	}

	.tabs-i {
		width: 150rpx;
		height: 70rpx;
		background: #F8F8F8;
		text-align: center;
		line-height: 70rpx;
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}

	.btn {
		position: fixed;
		bottom: 79rpx;
		width: calc(100% - 74rpx);
		left: 37rpx;
		height: 78rpx;
		background: #000000;
		border-radius: 39rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 78rpx;

	}

	.textarea {
		position: relative;
		margin: 0 32rpx;

		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
			margin: 44rpx 0 30rpx;
		}
	}
</style>